<template>
  <el-dialog
    :visible.sync="visible"
    title="详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="70px"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      label-width="100px"
    >
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="机构名称:">
            <p class="txt">{{ dataForm.title }}</p>
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="课程标签:">
            <p class="txt">{{ dataForm.typeList }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收藏数量:">
            <p class="txt">{{ dataForm.careNum }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="点赞数量:">
            <p class="txt">{{ dataForm.likeNum }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="评论数量">
            <p class="txt">{{ dataForm.commentNum }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="课程介绍:">
            <p class="txt content" v-html="dataForm.content" style="margin-top:8px"></p>
          </el-form-item>
        </el-col>
         <el-col :span="24">
          <el-form-item label="图片:">
            <el-image :preview-src-list="dataForm.pics" :src="item" v-for="(item,index) in dataForm.pics" :key="index" style="width:120px;height:120px"></el-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="padding:0 30px">
    <h3>评论列表</h3>
    <el-table :data="dataForm.comments" style="width: 100%">
      <el-table-column prop="content" label="内容"> </el-table-column>
      <el-table-column prop="createDate" label="时间"> </el-table-column>
      <el-table-column
        :label="$t('handle')"
        fixed="right"
        header-align="center"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
            >{{ $t("delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: "",
        comments:[],
        pics:[]
       
      },
    };
  },
  computed: {
  },
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/commcourse/getOne",{
          params:{
            id:this.dataForm.id
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.pics=this.dataForm.pic.split(',');
        })
        .catch(() => {});
    },
    // 表单提交
    deleteHandle(id,index) {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.delete("/scenic/commforum/deleteComment",{'data':[id]}
       ).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.dataForm.comments.splice(index,1)
            }
          })
        }).catch(() => { })
      }).catch(() => { })
    },
  },
};
</script>
<style lang="scss" scoped>
.txt {
    line-height: 40px;
    height: auto;
    margin: 0;
    padding: 0;

    &.content {
        ::v-deep p {
            padding: 0;
            line-height:24px;
            margin:0!important;
        }
        ::v-deep img{
            width:100%;
        }

        img {
            width: 100%;
        }
    }
}
</style>
